<template>
  <div class="page">
    <m-header :title="Exchange.exchange" :canback="Boolean(1)">
      <span @click="goTo('ExchangeRecord')" :class="{exlangEn:getLangId==2} ">{{Exchange.exchange_record}}</span>
    </m-header>
    <div class="body">
      <nav-item :navlist="navlist" @change="change"></nav-item>
      <form class="tj-form" v-if="type == 0">
        <div class="form-item">
          <label for="name">{{Exchange.dollar}}</label>
          <input type="text" :placeholder="Exchange.enter_exchange_mount" v-model="formData.amount" />
        </div>
        <div class="form-item">
          <label for="name">CSQA</label>
          <input type="text" v-model="csqa" readonly />
        </div>
      </form>
      <form class="tj-form" v-else>
        <div class="form-item">
          <label for="name">CSQA</label>
          <input type="text" :placeholder="Exchange.enter_exchange_mount" v-model="formData.amount" />
        </div>
        <div class="form-item">
          <label for="name">{{Exchange.dollar}}</label>
          <input type="text" v-model="csqa" readonly />
        </div>
      </form>
      <div
        class="tips"
      >{{Exchange.account_balance}}: {{exchInfo.exhange_csqa?exchInfo.exhange_csqa.wallet_dollar:''}}{{Exchange.dollar}} {{exchInfo.exchange_wallet?exchInfo.exchange_wallet.csqa:''}}CSQA</div>
      <div class="tips">1{{Exchange.dollar}}≈{{exchInfo.exhange_csqa?exchInfo.exhange_csqa.value:''}}CSQA</div>
      <button type="button" class="btn-submit btn-origin" @click="exch">{{Exchange.confirm_exchange}}</button>
    </div>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import navItem from "@/components/order-nav-item.vue";
import { Owner } from "@/server/server.js";
import { Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      csqa: null,
      type: 0,
      exchInfo: {},
      formData: {
        amount: "",
        type: "csqa"
      },
      navlist: [
        {
          id: 0,
          name: "美金至CSQA"
        },
        {
          id: 1,
          name: "CSQA至美金"
        }
      ],
      Exchange: {}
    };
  },
  created () {
    this.Exchange = this.lang.Exchange;
    this.navlist[0].name = this.Exchange.dollar_to_csqa;
    this.navlist[1].name = this.Exchange.csqa_to_doller;
  },
  mounted() {
    this.getRate();
  },
  computed: {
    ...mapGetters(["uid","lang","getLangId"])
  },
  watch: {
    "formData.amount"(newVal, val) {
      if (this.type == 0) {
        this.csqa = Number(this.exchInfo.exhange_csqa.value * newVal).toFixed(
          2
        );
      } else {
        this.csqa = Number(newVal / this.exchInfo.exhange_csqa.value).toFixed(
          2
        );
      }
      return this.csqa;
    }
  },
  methods: {
    goTo(name) {
      this.$router.push({ name: name });
    },
    getRate() {
      Owner.getRate({ id: this.uid }).then(res => {
        if (res.code == 1) {
          this.exchInfo = res.data;
        }
      });
    },
    exch() {
      if (
        this.formData.amount == null ||
        this.formData.amount == "" ||
        Number(this.formData.amount) <= 0
      ) {
        mui.toast(this.Exchange.enter_quantity);
        return;
      }
      Load.loadStart(this);
      Owner.exchange(this.formData).then(res => {
        let _This = this;
        if (res.code == 1) {
          mui.toast(res.msg);
          setTimeout(() => {
            _This.$router.go(-1);
            Load.loadEnd(this);
          }, 500);
        } else {
          Load.loadEnd(this);
          mui.toast(res.msg);
        }
      });
    },
    change(id) {
      this.type = id;
      this.formData.amount = "";
      this.csqa = "";
      if (id == 0) {
        this.formData.type = "csqa";
      } else {
        this.formData.type = "wallet_dollar";
      }
    }
  },
  components: {
    navItem
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.exlangEn {
  font-size: 24px;
}
.body {
  // padding: @margin-primary;
  background-color: white;
  .tj-form {
    // margin: 80px 50px 0px 50px;
    font-size: 34px;
    .form-item {
      .display-flex();
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      & > label {
        flex: 0.3;
        color: #333;
      }
      & > input {
        flex: 1;
        margin: 0;
        background: none;
        color: #000;
        border: none;
      }
    }
  }
  .tips {
    padding: 0 @margin-primary;
    // margin-top: 10px;
    color: red;
  }
  .btn-origin {
    width: 80%;
    display: block;
    padding: 20px 0;
    margin: 71px auto;
    background: #406ec3;
  }
}
</style>